<!-- 
  @name: 个人信息
  @date: 2020.2.27
 -->
<template>
	<view class="content">
		<!-- 个人信息 -->
		<view class="info">
			<view class="item">
				<text class="left-2">姓名</text><text class="xing">*</text>
				<input
					class="int"
					placeholder="请输入您的姓名"
					placeholder-class="phcolor"
					v-model="userName" />
			</view>
			<view class="item">
				<text class="left"><text>手机号</text><text class="xing">*</text></text>
				<text class="left-2" v-if="userPhone">
					{{userPhone.substr(0,3)}}****{{userPhone.substr(7,4)}}
				</text>
				<button class="get" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">
					<text :class="userPhone ? 't1' : ''" v-text="userPhone ? '修改' : '获取微信手机号'"></text>
				</button>
			</view>
			<!-- <view class="item">
				<text class="left">性别</text>
				<view
					class="sex"
					v-for="(item, index) in sexList"
					:key="index"
					@tap="sexChange(item, index)">
					<view class="_radio" :class="userSex === item.id ? '_rd1' : '_rd2'"></view>
					<text class="text" :class="userSex === item.id ? 't1' : ''">{{item.text}}</text>
				</view>
			</view>
			<view class="item">
				<text class="left">年龄</text>
				<picker @change="ageChange" :value="ageIndex" :range="ageList">
					<view>{{userAge}}</view>
				</picker>
			</view>
			<view class="item">
				<text class="left">身份</text>
				<picker @change="identityChange" :value="identityIndex" :range="identityList2">
					<view>{{userIdentity2}}</view>
				</picker>
			</view> -->
		</view>
		
		<!-- 上传驾驶证 -->
		<!-- <view class="upload">
			<view class="title">上传驾驶证照片</view>
			<view class="doview">
				<image class="img" :src="driveLicense" @tap="chooseImg"></image>
			</view>
		</view> -->
		
		<!-- 确定按钮 -->
		<button class="btn_submit" @tap="submit">确定</button>
		
		<!-- 登录提示 -->
		<sign-in></sign-in>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userName: '',  //用户名称
				sexList: [  //性别选项
					{ id: 1, text: '男' },
					{ id: 0, text: '女' }
				],
				userSex: 1,  //性别
				userAge: '60后',  //年龄
				ageIndex: 0,  //age序号
				userPhone: '',  //手机号
				ageList: ['60后', '70后', '80后', '90后', '00后'],  //年龄数组
				identity: 'UserIdentity',  //身份标识前缀
				userIdentity: 'UserIdentity0',  //身份符号
				userIdentity2: '车主',  //身份文字
				identityIndex: 0,  //身份序号
				identityList: ['UserIdentity0', 'UserIdentity1', 'UserIdentity2'],  //身份标识数组
				identityList2: ['车主', '车队长', '司机'],  //身份文字数组
				driveLicense: '',  //驾驶证照片
				driveLicense2: 'http://img.etubang.com/group1/M00/00/40/rBCky15Xf1CADDCDAAG_JRpzk5o300.png',  //驾驶证照片(默认)
			}
		},
		onLoad() {
			this.dataDefault();
		},
		methods: {
			//选择图片
			chooseImg() {
				uni.chooseImage({
					count: 1,  //最多选择个数
					success: (data) => {
						let path = data.tempFilePaths[0];
						this.$http({
							upload: true,
							filePath: path
						}).then(res => {
							this.driveLicense = res;
						});
					}
				});
			},
			//提交信息
			submit() {
				if(!this.userName) {
					this.$showToast('请输入用户名！');
					return;
				}
				if(!this.userPhone) {
					this.$showToast('请获取手机号！');
					return;
				}
				if(this.driveLicense === this.driveLicense2) {
					this.driveLicense = '';
				}
				this.$http({
					url: this.$api.userUrl + 'edituserinfo',
					data: {
						userName: this.userName,
						userSex: this.userSex,
						userAge: this.userAge,
						userPhone: this.userPhone,
						userIdentity: this.userIdentity,
						driveLicense: this.driveLicense
					}
				}).then(res => {
					let info = JSON.parse(this.$store.state.userinfo);
					info.userName = this.userName;
					info.userSex = this.userSex;
					info.userAge = this.userAge;
					info.userPhone = this.userPhone;
					info.userIdentity = this.userIdentity;
					info.driveLicense = this.driveLicense;
					this.$store.commit('setUserinfo', JSON.stringify(info));
					this.$successToast('修改成功！');
					this.$sucBack();
				});
			},
			//更改身份
			identityChange(e) {
				this.identityIndex = e.target.value;
				this.userIdentity = this.identity + this.identityIndex;
				this.userIdentity2 = this.identityList2[this.identityIndex];
			},
			//更改年龄
			ageChange(e) {
				this.ageIndex = e.target.value;
				this.userAge = this.ageList[this.ageIndex];
			},
			//更换性别选项
			sexChange(item, index) {
				this.userSex = item.id;
			},
			//初始化数据
			dataDefault() {
				let info = JSON.parse(this.$store.state.userinfo);
				this.userName = info.userName;
				this.userSex = info.userSex ? info.userSex : 0;
				this.userAge = info.userAge ? info.userAge : '60后';
				this.userPhone = info.userPhone ? info.userPhone : '';
				this.ageIndex = this.ageList.findIndex(item => item === this.userAge);
				this.userIdentity = info.userIdentity ? info.userIdentity : 'UserIdentity0';
				this.identityIndex = this.identityList.findIndex(item => item === this.userIdentity);
				this.userIdentity2 = this.identityList2[this.identityIndex];
				this.driveLicense = info.driveLicense ? info.driveLicense : this.driveLicense2;
			},
			//获取用户手机号
			onGetPhoneNumber(e) {
				if(e.detail.iv){
					let iv = e.detail.iv;
					let encryptedData = e.detail.encryptedData;
					uni.login({
						provider: 'weixin',
						success: (rs) => {
							this.$http({
								url: this.$api.userUrl + 'getwxphone',
								data: {
									code: rs.code,
									encryptedData: encryptedData,
									iv: iv
								}
							}).then(res => {
								this.userPhone = res.phoneNumber;
								this.submit();
							});
						}
					});
				}
			}
		}
	}
</script>

<style lang="scss">
	/* 个人信息 */
	.info {
		width: 750rpx;
		padding: 0 30rpx;
		margin-top: $spacing-col;
		background-color: $color-white;
		.item {
			width: 100%;
			height: 100rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			border-bottom: 1rpx solid $color-list;
			.left {
				flex: 1;
				color: $color-grey;
			}
			.left-2 {
				color: $color-grey;
			}
			.xing {
				color: #DD524D;
				margin-left: 12rpx;
			}
			.int {
				flex: 1;
				margin-left: 40rpx;
				text-align: end;
			}
			.get {
				margin-left: 15rpx;
				font-size: 30rpx;
				color: $color-text-primary;
				background-color: rgba(255,255,255,0);
				.t1 {
					font-size: 26rpx;
					color: $color-grey-dark;
					text-decoration: underline;
				}
			}
			.sex {
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-left: 54rpx;
				.text {
					margin-left: 22rpx;
				}
				.text.t1 {
					color: $color-text-primary;
				}
			}
		}
		.item:last-child {
			border-bottom: none;
		}
	}
	
	/* 上传驾驶证 */
	.upload {
		width: 750rpx;
		padding: 40rpx 0;
		margin-top: $spacing-col;
		background-color: $color-white;
		.title {
			margin-left: 30rpx;
		}
		.doview {
			width: 100%;
			margin-top: 40rpx;
			text-align: center;
			.img {
				width: 424rpx;
				height: 302rpx;
			}
		}
	}
	
	/* 确定按钮 */
	.btn_submit {
		position: fixed;
		bottom: 100rpx;
	}
</style>
